<template>
  <div class="upDownGoods">
    <a-card>
      <a-form :form="form">
        <a-row :gutter="30">
          <a-col :span="8">
            <a-form-item label="所属网点" :label-col="{ span: 5 }" :wrapper-col="{ span: 16,offset:1}">
              <a-select v-decorator="['branch']" placeholder="全部">
                <a-select-option value>全部</a-select-option>
                <a-select-option
                  v-for="item in branchName"
                  :key="item.id"
                  :value="item.id"
                >{{item.branchName}}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="点位名称" :label-col="{ span: 5}" :wrapper-col="{ span: 16, offset: 1}">
              <a-input placeholder="请输入" v-decorator="['pointName']" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="设备编号" :label-col="{ span: 5}" :wrapper-col="{ span: 16, offset: 1}">
              <a-input placeholder="请输入" v-decorator="['facilityNumber']" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="30">
          <a-col :span="8">
            <a-form-item label="巡柜员" :label-col="{ span: 5 }" :wrapper-col="{ span: 16,offset:1 }">
              <a-select v-decorator="['cruise']" placeholder="全部">
                <a-select-option value>全部</a-select-option>
                <a-select-option
                  v-for="item in employee"
                  :key="item.employeeId"
                  :value="item.employeeId"
                >{{item.name}}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="起止时间" :label-col="{ span: 5 }" :wrapper-col="{ span: 16,offset:1 }">
              <a-range-picker
                style="width: 100%"
                v-decorator="['startTime']"
                show-time
                format="YYYY-MM-DD HH:mm:ss"
              />
            </a-form-item>
          </a-col>
          <a-col :span="7" :style="{ textAlign: 'right' }">
            <a-button type="primary" @click="search">查询</a-button>
            <a-button type="dashed" style="margin: 0 2%" @click="listExport()">导出</a-button>
            <a-button @click="handleReset()">重置</a-button>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
    <a-card style="margin-top:2%">
      <a-table
        :columns="columns"
        :dataSource="data"
        :pagination="pagination"
        @change="handleTableChange"
        :rowKey="record => record.replenishmentOrderId"
        :bordered="true"
      >
        <template slot="afterSaleNumber">5048994163163104216</template>
        <template slot="operation" slot-scope="text,record">
          <div class="blue">
            <span @click="ImgModal(text,record,$event)">查看图片</span>
            <span @click="showModal(text,record)">详情</span>
          </div>
        </template>
      </a-table>
    </a-card>
    <a-modal title="查看图片" :visible="imgVisible" @ok="imgOk" @cancel="imgCancel" :width="1100">
      <div class="popForm">
        <ul>
          <li v-for="item in frontList" :key="item.index">第{{item.floor}}层</li>
        </ul>
        <p>上货前图片：</p>
        <ul>
          <li v-for="item in frontList" :key="item.index">
            <img :src="item.picUrl" alt />
          </li>
        </ul>
        <p>上货后图片：</p>
        <ul>
          <li v-for="item in behindList" :key="item.index">
            <img :src="item.picUrl" alt />
          </li>
        </ul>
      </div>
    </a-modal>
    <a-modal title="查看详情" :visible="visible" @ok="handleOk" @cancel="handleCancel" :width="800">
      <a-button style="margin: 0 0 3% 91%;" @click="listDetailExport()">导出</a-button>
      <a-table
        :columns="columnsDetails"
        :dataSource="dataDetails"
        :pagination="paginationDetails"
        @change="TableDetails"
        :rowKey="record => record.key"
        :bordered="true"
      >
        <template slot="loadingStatus" slot-scope="text,record">
          <span>{{record.type==1?'新增':'减少'}}</span>
        </template>
      </a-table>
    </a-modal>
  </div>
</template>

<script>
const columns = [
  {
    title: "巡柜员",
    dataIndex: "employeeName",
    scopedSlots: { customRender: "cruise" },
    align: "center"
  },
  {
    title: "设备编号",
    dataIndex: "devCode",
    scopedSlots: { customRender: "facilityNumber" },
    align: "center"
  },
  {
    title: "点位名称",
    dataIndex: "posName",
    scopedSlots: { customRender: "pointName" },
    align: "center"
  },
  {
    title: "所属网点",
    dataIndex: "branchName",
    scopedSlots: { customRender: "branch" },
    align: "center"
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
    scopedSlots: { customRender: "createTime" },
    align: "center"
  },
  {
    title: "操作",
    dataIndex: "operation",
    scopedSlots: { customRender: "operation" },
    align: "center"
  }
];

const data = [
  {
    key: "1"
  }
];

const columnsDetails = [
  {
    title: "商品名称",
    dataIndex: "goodsName",
    scopedSlots: { customRender: "goodsName" },
    align: "center"
  },
  {
    title: "上货状态",
    dataIndex: "type",
    scopedSlots: { customRender: "loadingStatus" },
    align: "center"
  },
  {
    title: "数量",
    dataIndex: "actualQuantity",
    scopedSlots: { customRender: "number" },
    align: "center"
  }
];
const dataDetails = [
  {
    key: "1"
  }
];
export default {
  name: "upDownGoods",
  data() {
    return {
      form: this.$form.createForm(this),
      data: [],
      columns,
      pagination: {
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ["10", "20", "30", "40"], //每页条数选择器
        showTotal: (total, range) => {
          return `${range[0]}-${range[1]} 共${total}条`;
        }, // 总数展示
        pageSize: 10, //每页条数
        defaultCurrent: 1, //默认当前页
        current: 1, //当前页
        total: 50 //数据总条数
      },
      visible: false,
      columnsDetails,
      dataDetails,
      paginationDetails: {
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ["10", "20", "30", "40"], //每页条数选择器
        showTotal: (total, range) => {
          return `${range[0]}-${range[1]} 共${total}条`;
        }, // 总数展示
        pageSize: 10, //每页条数
        defaultCurrent: 1, //默认当前页
        current: 1, //当前页
        total: 50 //数据总条数
      },
      imgVisible: false,
      frontList: [],
      behindList: [],
      branchName: [],
      employee: []
    };
  },
  watch: {},
  computed: {},
  methods: {
    handleReset() {
      this.form.resetFields();
    },
    handleTableChange(pagination, filters, sorter) {
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      pager.pageSize = pagination.pageSize;
      pager.total = pagination.total;
      this.pagination = pager;
      this.handleReset();
      this.search();
    },
    TableDetails(pagination, filters, sorter) {
      const pager = { ...this.paginationDetails };
      pager.current = pagination.current;
      pager.pageSize = pagination.pageSize;
      pager.total = pagination.total;
      this.paginationDetails = pager;
      this.handleReset();
      this.searchDetail(this.replenishmentOrderId);
    },

    ImgModal(text, record) {
      this.imgVisible = true;
      this.searchPic(record.eventId);
    },
    imgOk(e) {
      this.imgVisible = false;
    },
    imgCancel(e) {
      this.imgVisible = false;
    },

    showModal(text, record) {
      this.visible = true;
      this.replenishmentOrderId = record.replenishmentOrderId;
      this.searchDetail(this.replenishmentOrderId);
    },
    handleOk(e) {
      this.visible = false;
    },
    handleCancel(e) {
      this.visible = false;
    },

    // 点位初始化
    listInit() {
      this.axios
        .post(this.baseUrl + "/pos/listInit", {
          loginToken: this.$store.state.loginToken
        })
        .then(response => {
          console.log(response);
          this.branchName = response.data.data.branchName;
        });
    },

    // 根据点位id查询巡柜员的信息
    posGetBind() {
      this.axios
        .post(this.baseUrl + "/posEmployee/getBind", {
          loginToken: this.$store.state.loginToken
        })
        .then(response => {
          console.log(response);
          this.employee = response.data.data;
        });
    },

    // 上下货记录搜索
    search() {
      var values = this.form.getFieldsValue();
      if (values.startTime == undefined) {
        values.startTime == undefined;
      } else {
        this.startCreateTime = this.$moment(values.startTime[0]._d).format(
          "YYYY-MM-DD HH:mm:ss"
        );
        this.endCreateTime = this.$moment(values.startTime[1]._d).format(
          "YYYY-MM-DD HH:mm:ss"
        );
      }
      this.axios
        .post(this.baseUrl + "/replenishmentRecord/search", {
          loginToken: this.$store.state.loginToken,
          pageNum: this.pagination.current,
          pageSize: this.pagination.pageSize,
          branchId: values.branch,
          devCode: values.facilityNumber,
          employeeId: values.cruise,
          startTime: this.startCreateTime,
          endTime: this.endCreateTime,
          posName: values.pointName
        })
        .then(response => {
          // console.log(response);
          this.data = response.data.data.list;
          this.pagination.total = response.data.data.total;
          this.pagination.pageSize = response.data.data.pageSize;
          this.pagination.current = response.data.data.pageNum;
        });
    },

    // 查看上下货记录图片
    searchPic(eventId) {
      var values = this.form.getFieldsValue();
      this.axios
        .post(this.baseUrl + "/replenishmentRecord/searchPic", {
          loginToken: this.$store.state.loginToken,
          eventId: eventId
        })
        .then(response => {
          console.log(response);
          this.frontList = response.data.data.frontList;
          this.behindList = response.data.data.behindList;
        });
    },

    // 上下货记录详情搜索
    searchDetail(replenishmentOrderId) {
      var values = this.form.getFieldsValue();
      this.axios
        .post(this.baseUrl + "/replenishmentRecord/searchDetail", {
          loginToken: this.$store.state.loginToken,
          pageNum: this.paginationDetails.current,
          pageSize: this.paginationDetails.pageSize,
          replenishmentOrderId: replenishmentOrderId
        })
        .then(response => {
          // console.log(response);
          this.dataDetails = response.data.data.list;
          this.paginationDetails.total = response.data.data.total;
          this.paginationDetails.pageSize = response.data.data.pageSize;
          this.paginationDetails.current = response.data.data.pageNum;
        });
    },

    // 上下货记录详情导出
    listDetailExport() {
      this.axios
        .post(
          this.baseUrl + "/replenishmentRecord/exportDetail",
          {
            loginToken: this.$store.state.loginToken,
            replenishmentOrderId: this.replenishmentOrderId
          },
          { responseType: "arraybuffer" }
        )
        .then(response => {
          // console.log(response);
          if (response.status == "200") {
            const aLink = document.createElement("a");
            let blob = new Blob([response.data], {
              type: "application/vnd.ms-excel"
            });
            aLink.href = URL.createObjectURL(blob);
            aLink.download = "上下货记录详情表";
            aLink.click();
            document.body.appendChild(aLink);
          }
        });
    },

    // 上下货记录导出
    listExport() {
      var values = this.form.getFieldsValue();
      if (values.startTime == undefined) {
        values.startTime == undefined;
      } else {
        this.startCreateTime = this.$moment(values.startTime[0]._d).format(
          "YYYY-MM-DD HH:mm:ss"
        );
        this.endCreateTime = this.$moment(values.startTime[1]._d).format(
          "YYYY-MM-DD HH:mm:ss"
        );
      }
      this.axios
        .post(
          this.baseUrl + "/replenishmentRecord/export",
          {
            loginToken: this.$store.state.loginToken,
            branchId: values.branch,
            devCode: values.facilityNumber,
            employeeId: values.cruise,
            startTime: this.startCreateTime,
            endTime: this.endCreateTime,
            posName: values.pointName
          },
          { responseType: "arraybuffer" }
        )
        .then(response => {
          // console.log(response);
          if (response.status == "200") {
            const aLink = document.createElement("a");
            let blob = new Blob([response.data], {
              type: "application/vnd.ms-excel"
            });
            aLink.href = URL.createObjectURL(blob);
            aLink.download = "上下货记录表";
            aLink.click();
            document.body.appendChild(aLink);
          }
        });
    }
  },
  created() {
    this.listInit();
    this.posGetBind();
    this.search();
  },
  mounted() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.upDownGoods {
  width: 100%;
}
.popForm {
  padding: 0 1%;
}
.popForm ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.popForm li {
  margin: 0 1%;
}
.popForm img {
  width: 100%;
}
.popForm p {
  margin: 1% 0;
}
.hide {
  display: none;
}
</style>
